<template>
	<view class="shop">
		<view class="topSign">
			<!-- #ifdef MP-WEIXIN -->
			<view class="statusBar"></view>
			<!-- #endif -->
			<view class="userInfo dFlex jBetween_aCenter">
				<view class="info dFlex jStart_aCenter">
					<view class="userTx imgPublic">
						<image  lazy-load="true" :src="datas.member.image_head" mode="widthFix"></image>
					</view>
					<view class="signDay">
						<view class="showDay">已连续签到 {{datas.member.sign_days}} 天</view>
						<view class="tips">明日签到可获得{{datas.sign_point}}积分</view>
					</view>
				</view>
				<view class="sign dFlex jCenter_aCenter">
					<view class="biIcon imgPublic">
						<image src="https://wx.gdxixiashi.com/public/images/shop/jinbi@2x.png" mode="widthFix"></image>
					</view>
					<text>{{datas.member.point}}</text>
				</view>
			</view>
			<view class="part">
				<view class="partTit dFlex jBetween_aCenter">
					<text>{{datas.yundian}}</text>
					<text class="right"></text>
				</view>
				<view class="partList">
					<view class="line" v-for='(item,index) in datas.list2' :key='index' @click='goPage("/shop/allKind?styleId="+item.styleId+"&styleName="+item.style_name)'>
						<view class="lineImg imgPublic">
							<image  lazy-load="true"  :src="item.list_img?item.list_img:''" mode="widthFix"></image>
						</view>
						<text>{{item.style_name}}</text>
					</view>
				</view>
			</view>
			<view class="part">
				<view class="partTit dFlex jBetween_aCenter">
					<text>积分商城</text>
					<text class="right" @click='goPage("/shop/pointShop")'>全部商品</text>
				</view>
				<view class="partList">
					<view class="line" v-for='(item,index) in datas.list' :key='index' @click='goPage("/shop/pointShop?styleId="+item.styleId)'>
						<view class="lineImg imgPublic">
							<image  lazy-load="true"  :src="item.list_img" mode="widthFix"></image>
						</view>
						<text>{{item.style_name}}</text>
					</view>
				</view>
			</view>
			<view class="part" style="padding-bottom: 15px;">
				<view class="partTit dFlex jBetween_aCenter">
					<text>连续签到领好礼</text>
					<text class="right"></text>
				</view>
				<view class="day dFlex jBetween_aStart fWap">
					<view :class="['singleDay',item.is_sign == '1'?'active':'']" v-for='(item,index) in datas.signs.slice(0,6)' :key='index'>
						<view class="showDay">第 {{item.day}} 天</view>
						<view class="dayJB imgPublic">
							<image src="https://wx.gdxixiashi.com/public/images/shop/xiaojinbi@2x.png" mode="widthFix"></image>
						</view>
						<view class="point">{{item.point}} 积分</view>
					</view>
					<view :class="['diffDay','dFlex','jBetween_aStart',lastDay.is_sign == '1'?'active':'']">
						<view class="dayInfo">
							<view class="showDay">第 {{lastDay.day}} 天</view>
							<view class="point">神秘大礼包</view>
						</view>
						<view class="gift imgPublic">
							<image src="https://wx.gdxixiashi.com/public/images/shop/libao@2x.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="signBtn" @click='sign'>立即签到</view>
			</view>
			<view class="part" style="padding-bottom: 15px;">
				<view class="partTit dFlex jBetween_aCenter">
					<text>做任务赚积分</text>
					<text class="right"></text>
				</view> 
				<view class="partList" v-html="datas.point_rule">
					<!-- <view class="taskLine dFlex jBetween_aCenter" v-for="(item,index) in 6" :key='index'>
						<view class="task dFlex jStart_aCenter">
							<view class="taskIcon imgPublic">
								<image src="https://wx.gdxixiashi.com/public/images/shop/vip2@2x.png" mode="widthFix"></image>
							</view>
							<view class="taskDesc">
								<view class="taskTit">绑定手机号</view>
								<view class='smallDesc'>绑定手机号得5分</view>
							</view>
						</view>
						<view class="taskPoint dFlex jCenter_aCenter">
							<view class="jbIcon imgPublic">
								<image src="https://wx.gdxixiashi.com/public/images/shop/xiaojinbi@2x.png" mode="widthFix"></image>
							</view>
							<text>+500</text>
						</view>
					</view> -->
				</view>
			</view>
			<view class="seat"></view>
		</view>
		<tabbar actIdx='2' ref='tabbar' :identity='identity'></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				identity:'1',
				datas:{
					signs:[],
					list2:[{list_img:'../static/images/list_empty.png',style_name:'窗帘'},{list_img:'../static/images/list_empty.png',style_name:'电器'},{list_img:'../static/images/list_empty.png',style_name:'数码'}],
					list:[
						{
							list_img:"../static/images/list_empty.png",
							style_name:'洗涤日常',
						}
					],
					member:{
						sign_days:'0',
						point:'0',
					},
				},
				lastDay:{
					day:'',
				},
			};
		},
		onLoad() {
			
			this.$nextTick(()=>{
				// #ifdef APP-PLUS
				uni.hideTabBar();
				// #endif
				this.$refs.tabbar.init();
			})
			
			// #ifdef MP-WEIXIN
			uni.getLocation({
				type:'wgs84',
				success: (res) => {
					getApp().globalData.lat = res.latitude;
					getApp().globalData.lng = res.longitude;
				},
				fail:(err)=>{
					console.log(err);
				},
				complete:()=>{
					
				}
			})
			// #endif
			
		},
		onShow(){
			this.identity = uni.getStorageSync('identify');
			this.initData();
		},
		methods:{
			
			initData(){
				this.tool.getData('Index/pointIndex',{
					memberId:uni.getStorageSync('userId'),
				}).then(res=>{
					console.log(res);
					if(res){
						this.lastDay = res.signs.slice(res.signs.length-1)[0];
						this.datas = res;
						if(!uni.getStorageSync('userId')){
							this.datas.member = {
								image_head:'https://wx.gdxixiashi.com/public/head.png',
								sign_days:'0',
								sign_point:'10',
								point:0,
							}
						}
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			sign(){
				if(uni.getStorageSync('userId')){
					this.tool.getData('Index/sign',{
						memberId:uni.getStorageSync('userId'),
					}).then(res=>{
						if(res){
							uni.showToast({
								title:'签到成功',
								icon:"success"
							})
							this.initData();
						}
					})
				}else{
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url:'/person/login'
					})
					// #endif
					// #ifdef APP-PLUS
					uni.navigateTo({
						url:'/person/mobileLogin'
					})
					// #endif
				}
			},
			// 跳转
			goPage(url){
				uni.navigateTo({
					url:url,
				})
			}
		},
	}
	// 跳转到应用权限设置界面
	function gotoAppPermissionSetting() {
		var device = getApp().globalData.platform;
		if (device == 'ios') {
			var UIApplication = plus.ios.import("UIApplication");
			var application2 = UIApplication.sharedApplication();
			var NSURL2 = plus.ios.import("NSURL");
			// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");		
			var setting2 = NSURL2.URLWithString("app-settings:");
			application2.openURL(setting2);
	
			plus.ios.deleteObject(setting2);
			plus.ios.deleteObject(NSURL2);
			plus.ios.deleteObject(application2);
		} else {
			// console.log(plus.device.vendor);
			var Intent = plus.android.importClass("android.content.Intent");
			var Settings = plus.android.importClass("android.provider.Settings");
			var Uri = plus.android.importClass("android.net.Uri");
			var mainActivity = plus.android.runtimeMainActivity();
			var intent = new Intent();
			intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
			var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
			intent.setData(uri);
			mainActivity.startActivity(intent);
		}
	}
</script>

<style lang="scss">
	.shop{
		width:100%;
		.part{
			width:100%;
			padding:15px 15px 0;
			box-sizing: border-box;
			background:white;
			border-radius: 10px;
			margin-bottom:12px;
			.partList{
				width:100%;
				.taskLine{
					width:100%;
					padding:5px 0;
					.task{
						flex:1;
						.taskIcon{
							width:28px;
							height:28px;
							margin-right:12px;
						}
						.taskDesc{
							flex:1;
							font-size:12px;
							color:#C9CDD2;
							.taskTit{
								font-size:14px;
								color:#3F4658;
								 margin-bottom: 5px;
							}
						}
					}
					.taskPoint{
						width:max-content;
						color:white;
						padding:4px 10px;
						border-radius: 50px;
						background: linear-gradient(0deg,#1664ff 0%, #5f9ff8 100%);
						font-size:12px;
						.jbIcon{
							width:24px;
							margin-right:6px;
						}
					}
				}
				.line{
					display: inline-block;
					width:calc((100% - 14.5px * 2) / 3);
					margin-right: 14.5px;
					margin-bottom: 15px;
					text-align: center;
					color:#2A2A2A;
					font-size:13px;
					.lineImg{
						width:100%;
						margin-bottom: 8px;
					}
				}
				.line:nth-child(3n){
					margin-right:0;
				}
			}
			.day{
				width:100%;
				.singleDay{
					width:calc((100% - 12px * 3) / 4);
					margin-right:12px;
					margin-bottom: 12px;
					text-align: center;
					font-size:12px;
					background:#F4F6F9;
					padding:8px;
					box-sizing: border-box;
					border-radius: 5px;
					.dayJB{
						width:32px;
						margin:5px auto;
					}
				}
				.singleDay:nth-child(4){
					margin-right:0;
				}
				.point{
					font-size:10px;
					color:#C0C2CA;
				}
				.diffDay{
					padding:8px;
					border-radius: 5px;
					box-sizing: border-box;
					background:#F4F6F9;
					width:calc(100% - ((100% - 12px * 3) / 4 * 2) - 24px);
					.point{
						margin-top: 4px;
					}
					.gift{
						width:65px;
					}
				}
				.active{
					background: linear-gradient(0deg,#1664ff 0%, #5f9ff8 100%), #1664ff;
					color:white;
					.point{
						color:white;
					}
				}
			}
			.signBtn{
				width:100%;
				text-align: center;
				color:white;
				padding:10px 0;
				border-radius: 6px;
				background: linear-gradient(0deg,#1664ff 0%, #5f9ff8 100%), #1664ff;
			}
			.partTit{
				width:100%;
				font-size:16px;
				font-weight:bold;
				color:#1A203A;
				margin-bottom: 12px;
				.right{
					color:#999999;
					font-size:12px;
					font-weight: 400;
				}
			}
		}
		.topSign{
			width:100%;
			height: 278px;
			padding:calc(var(--status-bar-height)) 4% 0;
			box-sizing: border-box;
			background: linear-gradient(0deg,#158efb 2%, #609ff8 100%);
			
			.userInfo{
				padding:8vw 0 0;
				margin-bottom: 20px;
				color:white;
				.info{
					flex:1;
					.signDay{
						flex:1;
						.showDay{
							font-size:15px;
						}
						.tips{
							font-size:12px;
							margin-top:5px;
						}
					}
					.userTx{
						width:52px;
						height:52px;
						border-radius: 50%;
						margin-right: 12px;
						image{
							width:100%;
							height:100%;
						}
					}
				}
				.sign{
					width: max-content;
					border: 1px solid white;
					border-radius: 10px;
					padding:4px 6px;
					font-weight: bold;
					.biIcon{
						width:25px;
						margin-right:5px;
					}
				}
			}
			.statusBar{
				position: relative;
				top:0;
				left:0;
			}
		}
	}
	page{
		background:#f6f6f6;
	}
</style>
